<template>
  <div>
    <div style="display: flex; justify-content: flex-start; margin: 10px">
      <a-button type="primary" @click="editClass(null)">新增</a-button>

      <a-button style="margin:0 20px;" type="primary" @click="back(null)"
        >返回上一级</a-button
      >
    </div>

    <a-table
      :columns="columns"
      :rowKey="record => record.bannerId"
      bordered
      :dataSource="dataTable"
      @change="tableChange"
      :pagination="{
        pageSize: form.size,
        total: totalPage,
        hideOnSinglePage: true,
        current: form.page
      }"
    >
      <template slot="operation" slot-scope="text, row, index">
        <a-button size="small" type="primary" @click="editClass(row)"
          >编辑</a-button
        >
        <a-popconfirm
          title="你确定更要删除吗?"
          @confirm="delPlan(row)"
          @cancel="cancel"
          okText="确定"
          cancelText="取消"
        >
          <a-button size="small" type="danger">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>

    <!-- 弹框 -->
    <a-modal
      title="添加子级行业"
      :visible="visibleDetails"
      @cancel="visibleDetails = false"
      cancelText="关闭"
      okText="确定"
      @ok="handleSubmit"
    >
      <a-form :form="formData">
        <a-form-item
          label="语言"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-select
            placeholder="请选择文章语言"
            v-model="planDetails.language"
            @change="languageChange"
          >
            <a-select-option :value="1">简体中文</a-select-option>
            <a-select-option :value="2">繁体</a-select-option>
            <a-select-option :value="3">英语</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="行业名称"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-input v-model="planDetails.industryName"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import api from "@/api/api.js";
import UploadImg from "../../components/uploadImg.vue";
import { quillEditor } from "vue-quill-editor";
import { quillRedefine } from "vue-quill-editor-upload";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  components: {
    UploadImg
  },
  data() {
    return {
      visibleDetails: false,
      dataTable: [],
      columns: [
        {
          title: "子级行业名称",
          dataIndex: "industryName",
          align: "center",
          key: "industryName",
          scopedSlots: { customRender: "industryName" }
        },
        {
          title: "父级行业名称",
          dataIndex: "parentName",
          align: "center"
        },
        {
          title: "语言",
          dataIndex: "language",
          align: "center",
          customRender: function(text) {
            if (text == "1") {
              return "简体中文";
            } else if (text == "2") {
              return "繁体";
            } else if (text == "3") {
              return "英语";
            }
          }
        },
        {
          title: "操作",
          key: "operation",
          dataIndex: "operation",
          align: "center",
          scopedSlots: { customRender: "operation" }
        }
      ],
      rowSelection: {
        hideDefaultSelections: true
      },
      form: {
        size: 10, //每页条数
        page: 1 // 起始页
      },
      totalPage: 0,
      showHOST: api.showHOST,
      radioType: 2,
      formData: this.$form.createForm(this),
      planDetails: {
        industryName: "",
        language: "",
        industryId: "",
        parentId: "",
        type: ""
      },
      param: this.$route.query.params
    };
  },
  methods: {
    back() {
      this.$router.push("industryClassify");
    },
    cancel(e) {
      this.$message.error("取消!");
    },
    languageChange(values) {
      this.planDetails.language = values;
    },
    typeChange(values) {
      this.planDetails.type = values;
    },
    getPlan(row) {
      this.form.parentId = this.param;
      console.info(this.form);
      api.getIndustryPage(this.form).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.totalPage = res.result.totalCount;
          this.dataTable = res.result.content;
        }
      });
    },
    tableChange(pagination, filters, sorter) {
      this.form.page = pagination.current;
      this.getPlan(this.param);
    },
    delPlan(row) {
      api
        .delIndustry({
          ids: row.industryId
        })
        .then(res => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.getPlan(this.param);
          } else {
            this.$message.error(res.description);
          }
        });
    },
    editClass(row) {
      if (row != null) {
        this.planDetails = JSON.parse(JSON.stringify(row));
      } else {
        this.planDetails = {};
      }
      this.visibleDetails = true;
    },
    handleSubmit(e) {
      (this.planDetails.parentId = this.param),
        (this.planDetails.type = "2"),
        api.saveIndustry(this.planDetails).then(res => {
          if (res.code == 200) {
            this.visibleDetails = false;
            this.planDetails = {};
            this.$message.success("保存成功");
            this.getPlan(this.param);
          } else {
            this.$message.error(res.description);
          }
        });
    }
  },
  created() {
    this.getPlan(this.param);
  }
};
</script>

<style lang="scss" scoped="" type="text/css">
.editable-row-operations a {
  margin-right: 8px;
}
.top-btn {
  padding: 10px;
}
.code-img {
  display: block;
  width: 150px;
}
</style>
